<template>
	<view class="agent-pages-mine" :style="{background:!configInfo.plugAuth.agentport?pageColor:''}">
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="个人中心" color="#000"
			:backgroundColor="pageScrollTop>1?'#D4FADB':''">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<load-more :noMore="true" :loading="true" v-if="!isLoad"> </load-more>
		<block v-if="isLoad">
			<block v-if="!configInfo.plugAuth.agentport">
				<abnor type="NOT_AUTH" :isCenter="true"></abnor>
			</block>
			<block v-if="configInfo.plugAuth.agentport">
				<abnor @confirm="toLoginOut"
					:tip="[{text: options.agent ? `您还不是${$t('action.agentName')}哦～`:'您还不是管理员哦~'}]"
					:button="[{ text: '退出登录', type: 'confirm' }]" btnSize="" :isCenter="true" v-if="detail.id == -1">
				</abnor>
				<block v-else>
					<!-- #ifdef H5 -->
					<view class="space-sm"></view>
					<!-- #endif -->
					<image mode="aspectFill" lazy-load class="mine-bg abs"
						src="https://api.huixuananmm.com/admin/anmo/adminport/mine-bg.png"></image>
					<view class="rel" style="padding:0 20rpx">
						<view class="flex-between pt-md">
							<image mode="aspectFill" class="avatar sm radius" :src="configInfo.app_logo"></image>
							<view @tap.stop="toLoginOut" class="login-out flex-center f-mini-title radius"
								:style="{color:primaryColor,borderColor:primaryColor}">退出登录
							</view>
						</view>
						<view class="space-sm"></view>
						<view class="mine-count-list c-base mt-md pd-lg radius-20" :style="{background:primaryColor}"
							v-if="options.agent">
							<view class="flex-between">
								<view>
									<view class="text f-caption">可提现金额</view>
									<view class="f-sm-title">¥{{detail.cash}} </view>
								</view>
								<view class="flex-center">
									<view @tap.stop="toApplyCash('cash')"
										class="cash-out-btn flex-center f-desc c-base text-bold radius"
										:style="{background:primaryColor}">
										提现
									</view>
									<view @tap.stop="$util.goUrl({url:`/agent/pages/pay/order`})"
										class="cash-out-btn fill-base flex-center f-desc text-bold radius ml-md"
										:style="{color: primaryColor,borderColor:primarycolor}"
										v-if="detail.isPayRecord && !userInfo.agent_account_login">
										充值
									</view>
								</view>
							</view>
							<view class="count-data-list flex-x-center mt-lg pt-lg b-1px-t">
								<view class="list-item flex-center flex-column">
									<view class="f-sm-title">¥{{detail.total_cash}}</view>
									<view class="text f-caption c-caption">累计佣金 (不含手续费)</view>
								</view>
								<view class="list-item flex-center flex-column">
									<view class="f-sm-title">¥{{detail.unrecorded_cash}}</view>
									<view @tap.stop="$refs.show_rule_item.open()"
										class="text flex-center f-caption c-caption">未入账<i
											class="iconfont iconwentifankui3 ml-sm" style="font-size: 28rpx;"></i>
									</view>
								</view>
							</view>
						</view>
						<view class="fill-base mt-md radius-20"
							v-if="configInfo.plugAuth.store&&detail.store_auth&&(options.agent || (detail.is_agent && detail.group_write_off_auth && detail.node.includes('MarketCoupHxrecord')))">
							<view class="pd-lg f-paragraph text-bold" style="color:#434343">门店信息</view>
							<view class="tool-list flex-warp">
								<view @tap.stop="toJump('storeList',index)" class="tool-item flex-center flex-column"
									v-for="(item,index) in storeList" :key="index"
									v-show="(item.text == '门店概览' && options.agent) || (item.text != '门店概览' && detail[item.auth] && (options.agent || (detail.is_agent && detail.node.includes(item.node_auth))))">
									<view class="item-img flex-center radius" :style="{background:rgbaColor}">
										<i class="iconfont" :class="item.icon" :style="{color:primaryColor}"></i>
									</view>
									<view class="f-caption">{{item.text}}</view>
								</view>
							</view>
						</view>

						<view class="fill-base mt-md radius-20">
							<view class="pd-lg f-paragraph text-bold" style="color:#434343">其他设置</view>
							<view class="tool-list flex-warp">
								<view @tap.stop="toJump('toolList',index)" class="tool-item flex-center flex-column"
									v-for="(item,index) in toolList" :key="index"
									v-show="item.text =='账号设置' || (item.text !='账号设置' && (!item.auth || (item.auth && detail[item.auth])) && options.agent)">
									<i class="iconfont" :class="item.icon" :style="{color:primaryColor}"></i>
									<view class="f-caption">{{item.text}}</view>
								</view>
								<!-- #ifdef MP-WEIXIN-USER || H5-USER -->
								<view @tap.stop="toUserPort" class="tool-item flex-center flex-column">
									<i class="iconfont iconqiehuanjishiduan3" :style="{color:primaryColor}"></i>
									<view class="f-caption">切换用户端</view>
								</view>
								<!-- #endif -->
								<!-- #ifdef APP-PLUS -->
								<view @tap.stop="toUserPort" class="tool-item flex-center flex-column"
									v-if="is_app_user == 1">
									<i class="iconfont iconqiehuanjishiduan3" :style="{color:primaryColor}"></i>
									<view class="f-caption">切换用户端</view>
								</view>
								<!-- #endif -->
							</view>
						</view>
					</view>
				</block>

				<view class="space-lg"></view>
				<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
				<longbingbing-tabbar tabType="agentTabBar" :cur="5"></longbingbing-tabbar>
			</block>
		</block>
		<!-- #ifdef MP-WEIXIN -->
		<user-privacy ref="user_privacy" :show="false"></user-privacy>
		<!-- #endif -->

		<uni-popup ref="show_rule_item" type="center" :maskClick="false">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">未入账</view>
				<view class="f-desc c-title mt-lg">
					平台未到账的服务订单金额, 不含手续费
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_rule_item.close()" class="item-child"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				rgbaColor: '',
				storeList: [{
						icon: 'iconmendiangailan',
						text: '门店概览',
						url: '/agent/pages/shopstore/datas'
					}, {
						icon: 'iconhexiaojilu',
						text: '核销记录',
						url: '/agent/pages/shopstore/hx-record',
						auth: 'group_write_off_auth',
						node_auth: 'MarketCoupHxrecord'
					},
					// {
					// 	icon: 'icontixianshenqing1',
					// 	text: '套餐管理',
					// 	url: '/user/pages/distribution/record?type=5'
					// },
					// {
					// 	icon: 'iconchongzhimingxi',
					// 	text: '套餐订单',
					// 	url: '/agent/pages/pay/record'
					// }
				],
				toolList: [{
						icon: 'iconzhanghaoshezhi',
						text: '账号设置',
						url: '/agent/pages/account/setting'
					},
					{
						icon: 'iconyongjinxinxi1',
						text: '佣金信息',
						url: '/agent/pages/income/commission'
					},
					{
						icon: 'icontixianshenqing1',
						text: '提现申请',
						url: '/user/pages/distribution/record?type=5'
					},
					{
						icon: 'iconchongzhimingxi1',
						text: '充值明细',
						url: '/agent/pages/pay/record',
						auth: 'isPayRecord'
					},
					{
						icon: 'iconyuebiandongjilu1',
						text: '余额修改记录',
						url: '/technician/pages/income/update-record?type=3'
					}
				],
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			detail: state => state.user.agentInfo,
			haveOperItem: state => state.order.haveOperItem,
			agentportType: state => state.user.agentportType,
		}),
		async onLoad(options) {
			let {
				agentportType: agent = 0
			} = this
			options.agent = agent * 1
			this.options = options
			this.$util.setNavigationBarColor({
				bg: '#ffffff',
				color: '#000000'
			})
			this.initIndex()
		},
		async onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			await this.initRefresh()
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getAgentInfo', ]),
			...mapMutations(['updateUserItem', 'updateOrderItem']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh || !this.userInfo.id) {
					await this.getConfigInfo()
				}
				this.rgbaColor = this.$util.rgbColor(this.primaryColor, 0.15)
				await this.getAgentInfo()

				let textArr = [{
					icon: 'icontixianbangding',
					text: '提现绑定',
					url: '/agent/pages/account/bind',
					join: '充值明细'
				}]

				let {
					adapay = false,
						heepay = false
				} = this.configInfo.plugAuth

				let isBind = true
				// #ifdef MP-WEIXIN
				if (!adapay && !heepay) {
					isBind = false
				}
				// #endif

				textArr.map(item => {
					let {
						text,
						join
					} = item
					let ind = this.toolList.findIndex(aitem => {
						return text == aitem.text
					})
					if (ind != -1) {
						this.toolList.splice(ind, 1)
					}
					if (item.join) {
						delete item.join
					}
					let joinInd = this.toolList.findIndex(aitem => {
						return join == aitem.text
					})
					if (text == '提现绑定' && isBind) {
						this.toolList.splice(joinInd, 0, item)
					}
				})

				this.isLoad = true
				this.$util.hideAll()

				// #ifdef MP-WEIXIN
				let privacyCheck = this.$refs.user_privacy.check()
				if (privacyCheck) {
					this.$refs.user_privacy.open()
					return
				}
				// #endif

				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.initIndex(true)
			},
			async toApplyCash(key) {
				let cash = this.detail[key]
				if (cash * 1 == 0) {
					this.$util.showToast({
						title: `暂无可提现金额哦`
					})
					return
				}
				this.$util.goUrl({
					url: `/user/pages/cash-out?type=agent`
				})
			},
			toJump(key, index) {
				let {
					id = 0,
						url,
						text
				} = this[key][index]
				let {
					agent
				} = this.options
				let joinKey = url.includes('?') ? '&' : '?'
				url += `${joinKey}agent=${agent}`
				this.$util.goUrl({
					url
				})
			},
			// 退出登录
			toLoginOut() {
				this.isLoad = false
				this.$util.toLoginOut(3)
			},
			// 切换用户端
			toUserPort() {
				let {
					agent_account_login = 0
				} = this.userInfo
				if (agent_account_login) {
					this.updateUserItem({
						key: 'userInfo',
						val: {}
					})
					this.updateUserItem({
						key: 'autograph',
						val: ''
					})
				}
				this.$util.goUrl({
					url: `/pages/mine`
				})
			},
		}
	}
</script>

<style lang="scss">
	.agent-pages-mine {
		.mine-bg {
			/* #ifdef H5 */
			top: -180rpx;
			/* #endif */
			/* #ifndef H5 */
			top: 0;
			/* #endif */
			width: 100%;
			height: 550rpx;
			z-index: 0;
		}

		.login-out {
			width: 178rpx;
			height: 66rpx;
			border: 1rpx solid #fff;
			transform: rotateZ(360deg);
		}

		.mine-count-list {
			width: 710rpx;
			min-height: 295rpx;

			.text {
				color: rgba(255, 255, 255, 0.6)
			}

			.cash-out-btn {
				width: 126rpx;
				height: 70rpx;
				border: 1rpx solid #fff;
				transform: rotateZ(360deg);
			}

			.count-data-list {
				.list-item {
					width: 50%;
				}
			}
		}


		.tool-list {
			.tool-item {
				width: 25%;
				padding-bottom: 40rpx;

				.iconfont {
					font-size: 42rpx;
				}

				.item-img {
					width: 60rpx;
					height: 60rpx;

					.iconfont {
						font-size: 36rpx;
					}
				}

				.f-caption {
					color: #0F0D0E;
					margin-top: 15rpx;
				}
			}
		}
	}
</style>